<template>
  <view class="wh_750 bg_F5F5F5 flex flex-column align-center pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack :title="page.options.name ? page.options.name : '家谱详情'" is-fixed
                  background="#FFFFFF"
                  @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height:page.headerHeight+'px'}"></view>
    <!-- 树谱 -->
    <view class="wh_750" v-show="page.current == 0">
      <!--  家谱视图  -->
      <movable-area id="movableArea"
                    class="wh_750"
                    :style="{
                      height: `calc(100vh - ${page.headerHeight}px - 130rpx)`
                    }"
                    :scale-area="true"
                    @touchmove.stop
      >
        <movable-view id="movableView"
                      class="flex align-center justify-center"
                      direction="all"
                      :x="movable.x"
                      :y="movable.y"
                      :out-of-bounds="true"
                      :scale="true"
                      :scale-min="0.5"
                      :scale-max="5"
                      :scale-value="movable.scaleValue"
                      :style="{
                        minWidth: movable.movableViewInfo.width > getPx(750) ? `${movable.movableViewInfo.width + 100}px` : `750rpx`,
                        height: movable.movableViewInfo.height > systemInfo.windowHeight - page.headerHeight - getPx(130) ? `${movable.movableViewInfo.height}px` : `calc(100vh - ${page.headerHeight}px - 130rpx)`
                      }"
                      :animation="false"
                      :damping="0"
                      @scale="genealogicalScaling"
                      @change="movableViewChange"
        >
          <!-- #ifndef MP-WEIXIN -->
          <view id="recursiveList">
            <!-- #endif -->
            <recursive-list id="recursiveList"
                            :children="genealogicalInformation.genealogist"
                            isTopLevel
                            :is_create="genealogicalInformation.familyMemberInfo.is_create"
                            :is_init="genealogicalInformation.familyMemberInfo.is_init"
                            :generation="0"
                            :genealogicalHead="page.genealogicalHead"
                            :center-id="treeInfo.center_id"
                            @openAddPersonnelPopup="openAddPersonnelPopup"
                            @clickAdd="clickAdd"
            />
            <!-- #ifndef MP-WEIXIN -->
          </view>
          <!-- #endif -->
        </movable-view>
      </movable-area>
      <view class="management">
        <view class="managementTitle flex align-center justify-center" @click="goGenealogicalManagement">
          管理
        </view>
        <view class="managementNum mt_5">
          人数{{ genealogicalInformation.familyMemberInfo.all_count }}
          男{{ genealogicalInformation.familyMemberInfo.male }} 女{{ genealogicalInformation.familyMemberInfo.woman }}
        </view>
      </view>
    </view>

    <!-- 册谱 -->
    <view class="canonization"
          :style="{
            height:`calc(100vh - ${page.headerHeight}px)`,
            top:`${page.headerHeight}px`
          }"
          v-show="page.current == 1"
    >
      <image class="canonization_image" :src="`${IMG_URL}/index/canonization_bg.png`"></image>
      <view class="username" v-if="!!page.options && !!page.options.username">主编·{{ page.options.username }}</view>
      <view class="name">{{ page.options.name }}</view>
      <view class="time">{{ number2Chinese() }}</view>
    </view>
    <view class="ancestralHall"
          :style="{
            height:`calc(100vh - ${page.headerHeight}px)`,
            top:`${page.headerHeight}px`
          }"
          v-show="page.current == 2"
    >
      <scroll-view class="ancestralHall_scrollView" :scroll-y="true">
        <view class="all">
          <view class="ancestralHall_column flex justify-center align-center"
                v-for="(item,index) in listOfAncestralTemplesHandle" :key="index">
            <view class="ancestralHall_row" @click.stop="goToAncestralHall(item1)"
                  v-for="(item1,index1) in listOfAncestralTemplesHandle[index]" :key="index1">
              <image :src="`${IMG_URL}/index/lingpai.png`"></image>
              <view class="ancestralHall_row_name" v-if="!!item1 && !!item1.username">{{ item1.username }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="genealogicalDetails_bottom wh_750 flex justify-center">
      <!--      <su-tabs class="suTabs"-->
      <!--               lineColor="rgb(255,66,6)"-->
      <!--               :list="page.tabList"-->
      <!--               :inactiveStyle="page.inactiveStyle"-->
      <!--               :activeStyle="page.activeStyle"-->
      <!--               :scrollable="false"-->
      <!--               :current="page.current"-->
      <!--               @change="onTabsChange"-->
      <!--      ></su-tabs>-->
      <view class="flex align-center justify-evenly wh_750">
        <view v-for="(item,index) in page.tabList"
              :key="index"
              class="flex flex-column"
              :class="page.current == index ? 'activeStyle' : 'inactiveStyle'"
              @click.stop="onTabsChange(index)"
        >
          <view>{{ item.name }}</view>
          <view class="mt_5 hW_10"
                style="border-radius: 20rpx"
                :style="{
                  background: page.current == index ? '#FF4206' : 'transparent',
                }"
          ></view>
        </view>
      </view>
    </view>
    <!--  添加家谱成员（未有一个成员时）  -->
    <first_popup ref="addFamilyMemberPopUp">
      <template #content>
        <view class="flex flex-column align-center">
          <view class="familyMemberPopUp flex flex-column align-center">
            <view class="familyMemberPopUp_title mt_45">
              <view class="familyMemberPopUp_title_name">
                请选择性别
              </view>
            </view>
            <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          </view>
          <view class="hW_110"></view>
          <view class="genealogicalDetails_avatarList flex align-center z_10 wh_410 justify-around">
            <view class="genealogicalDetails_avatarList_list flex flex-column align-center"
                  :style="{
                  background:item.sex == 0? '#FC6F6F':'#6FA0FC'
                }"
                  v-for="(item,index) in genealogicalInformation.defaultAvatar"
                  :key="index"
                  @click.stop="goSetGenealogy(item)"
            >
              <view class="avatar">
                <image :src="`${nc_image}${item.avatar}`" class="images"></image>
              </view>
              <view class="name">
                {{ item.sex == 1 ? '男' : '女' }}
              </view>
            </view>
          </view>
          <view class="hW_117"></view>
          <view class="familyMemberPopUp_close flex align-center justify-center z_10"
                @click.stop="closeaFamilyMemberPopUp">
            取消
          </view>
          <view class="hW_47"></view>
        </view>
      </template>
    </first_popup>
    <!-- 个人卡片详情 -->
    <add-personnel-popup ref="addPersonnelPopup" :addPersonnelInfo="popup.addPersonnelInfo" :options="page.options"
                         @addRelation="addRelation"></add-personnel-popup>
    <!-- 选择人员弹窗 -->
    <SelectPeoplePopupWindow ref="selectPeoplePopupWindowFlag"
                             :relationshipsThatCanBeAdded="selectInfo.relationshipsThatCanBeAdded"
                             :addPersonnelInfo="popup.addPersonnelInfo"
                             @addMember="addMember"></SelectPeoplePopupWindow>
    <s-share-floating-window mode="left" ref="shareFloatingWindow" :is-family="false" :index="2"
                             v-if="page.current == 0 || page.current == 1"
                             @shareFriendsAndFamily="shareFriendsAndFamily"></s-share-floating-window>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue';
  import { onLoad, onShow, onReady, onUnload } from '@dcloudio/uni-app';
  import RecursiveList from '@/pages/genealogy/components/RecursiveList.vue';
  import sheep from '@/sheep';
  import First_popup from '@/pages/genealogy/components/first_popup.vue';
  import AddPersonnelPopup from '@/pages/genealogy/components/addPersonnelPopup.vue';
  import SelectPeoplePopupWindow from '@/pages/genealogy/components/selectPeoplePopupWindow.vue';
  import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
  import dayjs from 'dayjs';

  const { proxy } = getCurrentInstance();

  const systemInfo = computed(() => sheep.$platform.device);
  const page = reactive({
    headerHeight: 0,
    options: {},
    current: 0,
    tabList: [
      {
        name: '树谱', index: 0,
      },
      {
        name: '册谱', index: 1,
      },
      {
        name: '纪念堂', index: 2,
      },
    ],
    isFirst: false,
    activeStyle: {
      color: 'rgb(255,66,6)',
      fontSize: '36rpx',
      fontWeight: 'bold',
    },
    inactiveStyle: {
      color: '#696969',
      fontSize: '36rpx',
      fontWeight: 'bold',
    },
    // #ifdef H5
    // 存储当前按下的Ctrl键状态
    ctrlKeyDown: false,
    // #endif
    genealogicalHead: {},
  });
  const movable = reactive({
    x: 0,
    y: 0,
    scaleValue: 1,
    movableViewInfo: {
      width: 0,
      height: 0,
    },
    rpx: 750 / systemInfo.value.windowWidth,
    // 缩放之后的值
    scaleValueAfter: 1,
  });
  const genealogicalInformation = reactive({
    genealogist: [],
    familyMemberInfo: {},
    defaultAvatar: [],
  });
  const selectInfo = reactive({
    genealogy_id: '',
    memberInfo: {},
    relationshipsThatCanBeAdded: [],
  });
  const member = reactive({
    memberInfo: {},
  });
  const popup = reactive({
    addPersonnelInfo: {},
  });
  const commemorate = reactive({
    listOfAncestralTemples: [],
  });
  const listOfAncestralTemplesHandle = computed(() => {
    let list = {};
    let arr = commemorate.listOfAncestralTemples;
    list['arr0'] = [];
    for (let i = 0; i < 2; i++) {
      list['arr0'].push(arr[i]);
    }
    list['arr1'] = [];
    for (let i = 2; i < 8; i++) {
      list['arr1'].push(arr[i]);
    }
    list['arr2'] = [];
    for (let i = 8; i < 16; i++) {
      list['arr2'].push(arr[i]);
    }
    list['arr3'] = [];
    for (let i = 16; i < 24; i++) {
      list['arr3'].push(arr[i]);
    }
    let num = (arr.length - 24) / 8;
    for (let i = 0; i < num; i++) {
      list['arr' + (i + 4)] = [];
      for (let j = 8 * i + 8; j < 8 * (i + 1) + 8; j++) {
        list['arr' + (i + 2)].push(arr[j]);
      }
    }
    return list;
  });
  const getPx = (number) => {
    return uni.upx2px(number);
  };

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const treeInfo = computed(() => sheep.$store('family').treeInfo);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const locationInformation = reactive({
    x: 0,
    y: 0,
  });

  function number2Chinese() {
    let str = dayjs(page.options.add_time * 1000).format('YYYY-MM-DD');
    let chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    let numStr = str.replace(/[^0-9]+/g, '');
    let year = chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
    let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10] + chinese[numStr[5]];
    let day = '';
    if (numStr[6] === '0') {
      day = chinese[numStr[7]];
    } else if (numStr[6] === '1') {
      if (numStr[7] === '0') {
        day = chinese[10];
      } else {
        day = chinese[10] + chinese[numStr[7]];
      }
    } else if (numStr[6] === '2' || numStr[6] === '3') {
      if (numStr[7] === '0') {
        day = chinese[numStr[6]] + chinese[10];
      } else {
        day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
      }
    }
    return year + '年' + month + '月' + day + '日';
  }

  onLoad(async (options) => {
    // uni.showLoading({
    //   title: '加载中',
    //   mask: true,
    // });
    uni.$on('changeWidth', () => {
      changeWidth();
    });
    page.options = options;
    let { data } = await sheep.$api.family.getDefaultAvatar({ type: 3 });
    genealogicalInformation.defaultAvatar = data;
    // #ifdef H5
    // 监听wheel事件
    document.addEventListener('wheel', handleWheel);
    // #endif
    await sheep.$store('family').setGenealogyTree(page.options.id);
  });


  onShow(async () => {
    const result = await sheep.$api.genealogy.getGenealogyTreeAvatar({
      genealogy_id: page.options.id,
    });
    page.genealogicalHead = result.data;
    if (page.isFirst) {
      setTimeout(() => {
        uni.$emit('setAvatar_genealogy');
      }, 500);
      await sheep.$store('family').setGenealogyTree(page.options.id);
    }
    await getGenealogyTree();
    await getAncestralHall();
    // nextTick(() => {
    //   movable.rpx = 750 / systemInfo.value.windowWidth;
    //   const query = uni.createSelectorQuery().in(proxy);
    //   query.select('#recursiveList').boundingClientRect(res => {
    //     movable.movableViewInfo.width = res.width / movable.scaleValueAfter;
    //     movable.movableViewInfo.height = res.height / movable.scaleValueAfter;
    //   }).exec();
    // });
    // #ifdef H5
    const locationInformation = uni.getStorageSync('locationInformation');
    if (!!locationInformation) {
      movable.x = locationInformation.x;
      movable.y = locationInformation.y;
      uni.removeStorageSync('locationInformation');
    }
    // #endif
  });

  onReady(() => {
    uni.$on('setCoordinate', (info) => {
      // console.log(info, '获取的本人坐标位置');
      // if (!!page.isFirst) {
      //   return;
      // }
      nextTick(() => {
        const query = uni.createSelectorQuery().in(proxy);
        query.select(`#movableArea`).boundingClientRect(movableViewInfo => {
          if (!!movableViewInfo && movableViewInfo.width != 0) {
            console.log(!!movableViewInfo, '获取的movableViewInfo', movableViewInfo);
            if (!!info.info) {
              movable.x = -info.info.left + movableViewInfo.width / 2;
              movable.y = -info.info.top + movableViewInfo.height / 2;
              page.isFirst = true;
              uni.hideLoading();
            } else {
              let xWidth = uni.getSystemInfoSync().windowWidth;
              let YHeight = uni.getSystemInfoSync().windowHeight - page.headerHeight;
              movable.x = xWidth / 2 - movableViewInfo.width / 2;
              movable.y = YHeight / 2 - movableViewInfo.height / 2;
              uni.hideLoading();
            }
          }
        }).exec();
      });
    });
    // nextTick(() => {
    //   movable.rpx = 750 / systemInfo.value.windowWidth;
    //   let rpx = movable.rpx;
    //   const query = uni.createSelectorQuery().in(proxy);
    //   query.select('#recursiveList').boundingClientRect(res => {
    //     console.log(res, rpx);
    //     movable.movableViewInfo.width = res.width * rpx;
    //     movable.movableViewInfo.height = res.height * rpx;
    //   }).exec();
    // });
  });

  // #ifdef H5
  onUnload(() => {
    uni.removeStorageSync('locationInformation');
  });

  // #endif

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取家谱信息
  async function getGenealogyTree() {
    genealogicalInformation.genealogist = [];
    console.log(treeInfo.value);
    let data = treeInfo.value;
    genealogicalInformation.genealogist.push(data.data.data);
    genealogicalInformation.familyMemberInfo.all_count = data.all_count;
    genealogicalInformation.familyMemberInfo.male = data.male;
    genealogicalInformation.familyMemberInfo.woman = data.woman;
    genealogicalInformation.familyMemberInfo.code = data.code;
    genealogicalInformation.familyMemberInfo.name = data.name;
    genealogicalInformation.familyMemberInfo.username = data.username || '';
    genealogicalInformation.familyMemberInfo.add_time = data.add_time;
    genealogicalInformation.familyMemberInfo.remark = data.remark;
    genealogicalInformation.familyMemberInfo.is_create = data.is_create;
    genealogicalInformation.familyMemberInfo.is_init = data.is_init;
  }

  const addFamilyMemberPopUp = ref();

  // 添加家谱成员
  function clickAdd() {
    addFamilyMemberPopUp._value.openPopup({
      title: '添加家庭成员',
      showTitle: false,
      maskClick: true,
      popupBackground: true,
      isShowConfirm: false,
      showColseButton: false,
    });
  }

  function closeaFamilyMemberPopUp() {
    addFamilyMemberPopUp._value.closePopup();
  }

  // 跳转家谱成员
  function goSetGenealogy(info) {
    sheep.$router.go('/pages/genealogy/addRelatives', {
      sex: info.sex,
      img: info.img,
      val: selectInfo.memberInfo.val || -1,
      id: selectInfo.memberInfo.id || '',
      genealogy_id: page.options.id,
    });
    addFamilyMemberPopUp._value.closePopup();
  }

  const addPersonnelPopup = ref();

  async function openAddPersonnelPopup(info) {
    const { data } = await sheep.$api.genealogy.getGenealogyPersonal({ id: info.id });
    popup.addPersonnelInfo = data;
    addPersonnelPopup._value.open();
  }

  const selectPeoplePopupWindowFlag = ref();

  async function addRelation() {
    addPersonnelPopup._value.close();
    const { data } = await sheep.$api.genealogy.getConfigMember({
      record_id: popup.addPersonnelInfo.id,
    });
    selectInfo.relationshipsThatCanBeAdded = data;
    selectPeoplePopupWindowFlag._value.open();
  }

  function addMember(info) {
    member.memberInfo = info;
    selectPeoplePopupWindowFlag._value.close();
    sheep.$router.go('/pages/genealogy/addRelatives', {
      val: member.memberInfo.val,
      genealogy_id: page.options.id,
      id: popup.addPersonnelInfo.id,
      sex: info.sex,
      is_create: genealogicalInformation.familyMemberInfo.is_create,
      is_init: genealogicalInformation.familyMemberInfo.is_init,
      gxval: popup.addPersonnelInfo.gxval,
      name: page.options.name,
      gxname: info.name,
    });
  }

  function onTabsChange(e) {
    page.current = e;
    nextTick(() => {
      proxy.$forceUpdate();
    });
  }

  // 获取祠堂信息
  async function getAncestralHall() {
    let { data } = await sheep.$api.genealogy.getMemorialTablet({ genealogy_id: page.options.id });
    commemorate.listOfAncestralTemples = data;
  }

  // 跳转缅怀详情
  async function goToAncestralHall(info) {
    if (!info) {
      sheep.$router.go('/pages/genealogy/famousQuote');
      return;
    }
    let { data } = await sheep.$api.genealogy.aliveDetail({
      type: 2,
      alive_id: info.id,
    });
    uni.setStorageSync('aliveDetail', JSON.stringify(data));
    sheep.$router.go('/pages/genealogy/ct_detail', {
      sex: info.sex,
    });
  }

  function goGenealogicalManagement() {
    sheep.$router.go('/pages/genealogy/genealogicalManagement', { id: page.options.id });
  }

  function shareFriendsAndFamily() {
    uni.setStorageSync('shareFamilyTreePoster', JSON.stringify({
      id: page.options.id,
      avatar: userInfo.value.avatar.indexOf('http') != -1 ? userInfo.value.avatar : IMG_URL.value + userInfo.value.avatar,
      name: genealogicalInformation.familyMemberInfo.name,
      code: genealogicalInformation.familyMemberInfo.code,
      username: genealogicalInformation.familyMemberInfo.username,
      add_time: genealogicalInformation.familyMemberInfo.add_time,
      remark: genealogicalInformation.familyMemberInfo.remark,
    }));
    sheep.$router.go('/pages/genealogy/genealogySharing');
  }

  function changeWidth() {
    nextTick(() => {
      movable.rpx = 750 / systemInfo.value.windowWidth;
      let rpx = movable.rpx;
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#recursiveList').boundingClientRect(res => {
        movable.movableViewInfo.width = res.width / movable.scaleValueAfter;
        movable.movableViewInfo.height = res.height / movable.scaleValueAfter;
      }).exec();
    });
  }

  function genealogicalScaling(e) {
    console.log(e);
    movable.scaleValueAfter = e.detail.scale;
  }

  function movableViewChange(e) {
    locationInformation.x = e.detail.x;
    locationInformation.y = e.detail.y;
    // #ifdef H5
    uni.setStorageSync('locationInformation', { x: e.detail.x, y: e.detail.y });
    // #endif
  }

  // #ifdef H5
  // 处理wheel事件
  function handleWheel(event) {
    if (page.ctrlKeyDown) {
      // 在这里处理Ctrl + 鼠标滚轮的逻辑
      console.log('Ctrl + 鼠标滚轮操作');
      // 你的逻辑代码

      // 可选：阻止默认的滚动行为
      event.preventDefault();
    }
  }

  // #endif
</script>


<style scoped lang="scss">
  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .genealogicalDetails_avatarList {
    .genealogicalDetails_avatarList_list {
      width: 128rpx;
      height: 223rpx;
      background: #6FA0FC;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;

        .images {
          width: 128rpx;
          height: 128rpx;
        }
      }

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #FFFFFF;
      }
    }
  }

  .familyMemberPopUp_close {
    width: 362rpx;
    height: 80rpx;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    border: 2rpx solid #FF4206;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FF4206;
  }

  .genealogicalDetails_bottom {
    position: fixed;
    bottom: 0;
    height: 130rpx;
    border-top: 2rpx solid #E5E5E5;
    background: #FFFFFF;
  }

  .suTabs {
    ::v-deep .u-tabs {
      border: none !important;
    }
  }

  .canonization {
    width: 750rpx;
    height: 100vh;
    position: fixed;

    .canonization_image {
      width: 100%;
      height: 100%;
    }

    .username {
      position: absolute;
      right: 426rpx;
      top: 640rpx;
      width: 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 27rpx;
      color: #42403C;
    }

    .name {
      position: absolute;
      right: 250rpx;
      top: 240rpx;
      width: 103rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 103rpx;
      color: #42403C;
    }

    .time {
      position: absolute;
      right: 154rpx;
      top: 530rpx;
      width: 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 27rpx;
      color: #42403C;
    }
  }

  .ancestralHall {
    width: 750rpx;
    height: 100vh;
    position: fixed;
    background: url($uni-bg-url-sq + "/index/citang.jpg") no-repeat;
    background-size: 100% 100%;

    .ancestralHall_scrollView {
      position: absolute;
      width: 470rpx;
      height: 580rpx;
      background: transparent;
      top: 350rpx;
      left: 50%;
      transform: translateX(-50%);

      .all {
        width: 470rpx;

        .ancestralHall_column {
          width: 470rpx;

          .ancestralHall_row {
            position: relative;

            image {
              width: 57rpx;
              height: 131rpx;
            }

            .ancestralHall_row_name {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -72%);
              width: 16rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
              line-height: 18rpx;
            }
          }
        }
      }
    }
  }

  .management {
    position: fixed;
    left: 24rpx;
    bottom: 150rpx;

    .managementTitle {
      width: 143rpx;
      height: 50rpx;
      background: #FF4206;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }

    .managementNum {
      width: 207rpx;
      height: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #9F9F9F;
    }
  }

  .activeStyle {
    color: rgb(255, 66, 6);
    font-size: 36rpx;
    font-weight: bold;
  }

  .inactiveStyle {
    color: #696969;
    font-size: 36rpx;
    font-weight: bold;
  }
</style>
